<template>
  <div class="container">
    <div class="main-container">
      <div class="header-container">
        <div class="title">公司操作规程征求意见表</div>
      </div>
      <div class="main is-scroll-bar">
        <div class="item-content">
          <el-descriptions
            :column="4"
            class="content-container"
            size="medium"
            border
          >
            <el-descriptions-item label="外来人员名单" :span="2">
              <el-input></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="进入公司事由" :span="2">
              <el-input></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="时间" :span="2">
              <el-button>上传</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="培训主要内容" :span="2">
              <el-input type="textarea" rows="5"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="文件及影像资料" :span="2">
              <el-button></el-button>
            </el-descriptions-item>
            <el-descriptions-item label="培训人" :span="2">
              <el-input></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="培训时间" :span="2">
              <el-input></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <el-button type="success" icon="el-icon-printer">保存</el-button>
        </div>
      </div>
    </div>
    <myDialog
      :Form="Form"
      :label="label2"
      :visible="visible"
      @disVisible="visible = false"
      @submitSecurity="submitSecurity"
    >
      <template #remark="obj">
        <el-input
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
          v-model="obj.params.row.remark"
        >
        </el-input>
      </template>
    </myDialog>
  </div>
</template>

<script setup>
import { ref, defineComponent } from "vue";
const NewComponentName = defineComponent({
  name: "SafetyManagementIndex",
  setup() {
    return {};
  },
});

console.log(NewComponentName);
const label2 = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "内容",
    prop: "b",
  },
  {
    label: "签名",
    prop: "c",
  },
]);
const visible = ref(false);
const submitSecurity = async (val) => {
  console.log(val);
  if (val.value.edit == true) {
    visible.value = false;
    let result = await putCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.message,
        type: "error",
      });
    }
    changeTable();
  } else {
    visible.value = false;
    let result = await addCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "error",
      });
    }
    changeTable();
  }
  Form.value = {
    id: null,
    serialNumber: null,
    type: null,
    checklistContents: null,
    circumstance: null,
    remark: null,
  };
};
const Form = ref({
  id: null,
  serialNumber: null,
  type: null,
  checklistContents: null,
  circumstance: null,
  remark: null,
});

const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
import {
  getCorporateProductionResponsibility,
  addCorporateProductionResponsibility,
  putCorporateProductionResponsibility,
} from "@/api/safetymanagement";
import { onMounted } from "vue";
import myDialog from "@/components/my-dialog.vue";

console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getCorporateProductionResponsibility(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  // data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
// const addFile = async (list) => {
//   let result = await addCorporateProductionResponsibility({
//     fileName: list[0].name,
//     fileUrl: list[0].url,
//   });
//   if (result.code == 0) {
//     Notification({
//       title: "成功",
//       message: "上传成功",
//       type: "success",
//     });
//     changeTable();
//   } else {
//     Notification({
//       title: "失败",
//       message: "上传失败",
//       type: "error",
//     });
//   }
// };
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//选中的id
selectionChange([]);
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;

  .main-container {
    height: 100%;
    overflow: hidden;
    border: solid 1px #e6e6e6;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }

      .search-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        .item-filter-width {
          width: 380px;
        }
      }
    }

    .main {
      flex: 1;
      height: 0;
      padding: 12px 15px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;

      .item-content {
        margin-bottom: 20px;

        .item-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          .subheading {
            position: relative;
            color: #555;
            font-size: 14px;
            padding-left: 14px;

            &::after {
              content: "";
              width: 2px;
              height: 14px;
              background-color: #82a848;
              left: 0;
              top: calc(50% - 7px);
              position: absolute;
            }

            &::before {
              content: "";
              width: 2px;
              height: 14px;
              background-color: #82a848;
              left: 4px;
              top: calc(50% - 7px);
              position: absolute;
            }
          }
        }

        .content-container {
          margin-top: -1px;
        }
      }
    }
  }
}

::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  width: 134px !important;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-r-5 {
  margin-right: 5px;
}
</style>
